<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    modal
    :before-close="handleClose"
  >
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio
              :label="item.label"
              v-for="item in genderArr"
              :key="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="爱好" prop="hobby">
          <el-checkbox-group v-model="ruleForm.hobby" @change="changeBox">
            <el-checkbox
              v-for="item in checkboxArr"
              :label="item.label"
              :key="item.id"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    obj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        name: '',
        gender: '男',
        hobby: []
      },
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        hobby: [{ required: true, message: '请选择爱好', trigger: 'blur' }]
      },
      genderArr: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ],
      checkboxArr: [
        {
          id: 1,
          label: '打篮球'
        },
        {
          id: 2,
          label: '打游戏'
        },
        {
          id: 3,
          label: '看电影'
        }
      ]
    }
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.title === '编辑') {
          this.ruleForm = this.obj
        } else {
          this.ruleForm = {
            name: '',
            gender: '男',
            hobby: []
          }
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    changeBox(e) {
      this.ruleForm.hobby = e
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          if (this.title !== '编辑') {
            this.$emit('addItem', this.ruleForm)
          } else {
            this.$emit('editItem', this.ruleForm)
          }
          this.$emit('close')
        }
      })
    }
  }
}
</script>
